<template>
  <div>

      <el-card :class="['cardInTab']" shadow="never" key="card3">
        <el-form ref="addSpuFormRef" :model="addSpuFormData"
                 :rules="addSpuFormRules"
                 label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="SPU名称" :required="true">
                <el-input v-model="addSpuFormData.name"></el-input>
              </el-form-item>
              <el-form-item label="分类" :required="true">
                <template slot-scope="scope">
                  <el-cascader
                    placeholder="选择分类"
                    clearable
                    :props="props"
                    :options="prodCates"
                    size="medium"
                    @change="handleCateSelectionChangeInAddSpuPanel"
                    filterable></el-cascader>
                </template>
              </el-form-item>


              <el-form-item label="spu编码" :required="true" :error="spuCodeErrorMessage">
                <el-input v-model="addSpuFormData.code"></el-input>
              </el-form-item>
              <el-form-item label="品牌" :required="true" :error="spuCodeErrorMessage">
                <!--<el-input v-model="addSpuFormData.brandName"></el-input>-->
                <el-autocomplete
                  v-model="addSpuFormData.brandName"
                  :fetch-suggestions="handleQuerySearchBrand"
                  placeholder="请输入品牌"
                  value-key="name"
                  @select="handleBrandSelect"
                ></el-autocomplete>
              </el-form-item>
              <el-form-item label="简介">
                <el-input type="textarea" autosize v-model="addSpuFormData.brief"></el-input>
              </el-form-item>
              <el-form-item label="上架/下架">
                <el-switch :value="addSpuFormData.banSale==0"
                           @change="handleBanSaleSwitchChangeInAddSpuPanel"></el-switch>
              </el-form-item>

              <el-form-item label="详情图片">
                <el-upload
                  ref="imageUploadRef"
                  :action="ossServer"
                  list-type="picture-card"
                  :on-remove="handleUploadRemove"
                  :on-success="handleUploadSuccess"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="10"></el-col>
          </el-row>
        </el-form>
        <el-button @click="handleCancleAddSpuButtonClick()">取 消</el-button>
        <el-button type="primary" @click="handleConfirmAddSpuButtonClick()">添 加</el-button>

      </el-card>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import {prodTabNameList} from "../../config/variable";

  export default {
    name: "ProdSpuAdd",
    data() {
      return {
        //错误提示消息绑定
        spuCodeErrorMessage: '',
        //添加SPU的数据绑定源
        addSpuFormData: {
          cateId: -1,
          name: 'test',
          code: 'test',
          brandName: 'test',
          brief: 'test',
          banSale: 0,
          images: []
        },

        fileMap: new Map(),
        // 数据校验规则
        addSpuFormRules: {
          name: [{required: true, message: '请输入', trigger: 'blur'}],
          code: [{required: true, message: '请输入', trigger: 'blur'}]
        },
        // 级连选择器的字段映射
        props: {
          value: 'id',
          label: 'name',
          leaf: 'isLeaf',
          expandTrigger: 'hover'
        }
      }
    },

    computed: {
      ...mapState({
        ossServer:state=>state.prod.ossServer,
        imageServer: state=>state.prod.imageServer,
        prodCates: state=>state.prod.prodCates
      })
    },

    methods: {
      ...mapMutations(['setOssServer', 'setImageServer','setProdActiveTabName']),

      // 选择记录品牌
      handleBrandSelect(brand){
        this.addSpuFormData.brandName = brand.name;
      },

      // 查询回调
      handleQuerySearchBrand(query,cb){
        this.api.__api__BrandsByQuery(query)
          .then(data=>{
            cb(data.data);
          })
      },


      //文件上传成功
      handleUploadSuccess(response, file, fileList) {
        this.fileMap.set(file, response.data[0]);
      },

      //文件删除
      handleUploadRemove(file, fileList) {
        const path = this.fileMap.get(file);
        if (path) {
          this.fileMap.delete(file);
        }
      },





      //上下架切换
      handleBanSaleSwitchChangeInAddSpuPanel(val) {
        if (val) {
          this.addSpuFormData.banSale = 0;
        } else {
          this.addSpuFormData.banSale = 1;
        }
      },

      //取消添加SPU
      handleCancleAddSpuButtonClick() {
        this.setProdActiveTabName(prodTabNameList.prodList);
      },

      //确认添加SPU
      handleConfirmAddSpuButtonClick() {
        //处理文件上传
        console.log("handleConfirmAddSpuButtonClick...");
        for (let path of this.fileMap.values()) {
          this.addSpuFormData.images.push(path);
        }
        console.log("数据xx=" + JSON.stringify(this.addSpuFormData));
        this.api.__api__ProductSpuAdd(this.addSpuFormData)
          .then(data => {
            console.log("添加成功了...");
            this.setProdActiveTabName(prodTabNameList.prodList);
          })
          .catch(error => {
            console.error(error);
          })
      },

      //分类选择
      handleCateSelectionChangeInAddSpuPanel(val) {
        this.addSpuFormData.cateId = val[2];
      }
    }
  }
</script>

<style scoped>

</style>
